<template>
    <div class="top-list">
<!--        <div class="top-h">-->
<!--            <img src="./bb.png" alt="" class="img">-->
<!--            <span class="top-title">必buy好物</span>-->
<!--            <div class="inps">-->
<!--                <span class="iconfont iconsearch"></span>-->
<!--                <input type="text" v-model="remark" placeholder="请输入您要搜索的内容">-->
<!--            </div>-->
<!--            <div class="right">-->
<!--                <span class="iconfont iconarrow_right"></span>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="items">-->
<!--            <div class="item" v-for="(item,index) in itemList" :key="index" @click="turn(item.id)">-->
<!--                <img :src="imgH+item.img" alt="" class="img">-->
<!--                <div class="name">{{item.name}}</div>-->
<!--                <div class="info">{{item.info}}</div>-->
<!--                <div class="prices">-->
<!--                    <span class="nowPrice">￥{{item.nowPrice}}</span>-->
<!--                    <span class="oldPrice">￥{{item.oldPrice}}</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="test">
            <div class="stable">
                <div class="item" v-for="(item,index) in leftList" :key="index" @click="turn(item.id)">
                    <img v-lazy="imgH+item.img" alt="" class="img">
                    <div class="name">{{item.name}}</div>
                    <div class="info">
                        <div class="share" v-if="item.act&&item.act.cashReward&&saleType!==5">
                            <p>送代金券￥{{item.act.cashReward.split('_')[1]}}</p>
                        </div>
                        <div v-if="item.act&&item.act.voucherReward&&saleType!==5"
                             class="share sec">
                            <p>送换购券￥{{item.act.voucherReward.split('_')[1]}}</p>
                        </div>
                    </div>
                    <div class="center">
                        <div class="left">
                            <div class="up">
                                <span class="rmb">￥</span>
                                <span class="intPrice">{{item.nowPrice?parseInt(item.nowPrice):'00'}}</span>
                                <span class="doublePrice">.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</span>
                                <span class="sellNum">{{item.sales?'已售'+item.sales:''}}</span>
                            </div>
                            <div class="down">
                                <div class="share" v-if="item.act&&item.act.maxCoupon&&saleType!==5">
                                    <p>可用优惠券￥{{item.act.maxCoupon}}</p>
                                </div>
                                <div class="share" v-if="item.act&&item.act.maxVoucher&&saleType!==5">
                                    <p>可用换购券￥{{item.act.maxVoucher}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="right" @click.stop="toShare(item.id)">
                            <img src="./shareImg.png">
                            <div>分享</div>
                        </div>
                    </div>
                    <div class="shop" v-if="showShop" @click.stop="toStore(item.userId)">
                        <span class="name">{{item.shopEntity?item.shopEntity.name:'社集优选自营店'}}</span>
<!--                        <span v-else>5集时代自营店</span>-->
                        <span>进店></span>
                    </div>
                </div>
            </div>
            <div class="change">
                <div class="item" v-for="(item,index) in rightList" :key="index" @click="turn(item.id)">
                    <img v-lazy="imgH+item.img" alt="" class="img">
                    <div class="name">{{item.name}}</div>
                    <div class="info">
                        <div class="share" v-if="item.act&&item.act.cashReward&&saleType!==5">
                            <p>送代金券￥{{item.act.cashReward.split('_')[1]}}</p>
                        </div>
                        <div v-if="item.act&&item.act.voucherReward&&saleType!==5"
                             class="share sec">
                            <p>送换购券￥{{item.act.voucherReward.split('_')[1]}}</p>
                        </div>
                    </div>
                    <div class="center">
                        <div class="left">
                            <div class="up">
                                <span class="rmb">￥</span>
                                <span class="intPrice">{{item.nowPrice?parseInt(item.nowPrice):'00'}}</span>
                                <span class="doublePrice">.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</span>
                                <span class="sellNum">{{item.sales?'已售'+item.sales:''}}</span>
                            </div>
                            <div class="down">
                                <div class="share" v-if="item.act&&item.act.maxCoupon&&saleType!==5">
                                    <p>可用优惠券￥{{item.act.maxCoupon}}</p>
                                </div>
                                <div class="share" v-if="item.act&&item.act.maxVoucher&&saleType!==5">
                                    <p>可用换购券￥{{item.act.maxVoucher}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="right" @click="toShare(item.id)">
                            <img src="./shareImg.png">
                            <div>分享</div>
                        </div>
                    </div>
                    <div class="shop" v-if="showShop" @click.stop="toStore(item.userId)">
                        <span class="name">{{item.shopEntity?item.shopEntity.name:'社集优选自营店'}}</span>
<!--                        <span v-else>5集时代自营店</span>-->
                        <span>进店></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        props:{
            items:Array,
            showShop:{
                type:Boolean,
                default:true
            },
            saleType:{
                type:Number,
                default: 0
            }
        },
        methods:{
            turn(id){
                this.$router.push({
                    path:'/detail',
                    query:{
                        id:id
                    }
                })
            },
            toShare(id){
                this.$router.push({
                    path:'/detail',
                    query:{
                        id:id,
                        type:'share'
                    }
                })
            },
            toStore(uid){
                this.$router.push({
                    path:'/shop/list',
                    query:{
                        uid:uid?uid:0
                    }
                })
            }
        },
        computed:{
            itemList(){

                if(!this.remark||this.remark.trim()==''){
                    return this.items
                }else {

                    return  this.items.filter(item=>{

                        return  item.name.indexOf(this.remark) > -1
                    })
                }
            },
            isWg(){
                return process.env.VUE_APP_NAME !== 'wg'
            }
        },
        data() {
            return {
                remark:"",
                imgH : process.env.VUE_APP_IMG_DOMAIN,
                leftList:[],
                rightList:[]
            }
        },
        watch:{
            itemList(){
                let count = this.count
                if(count == this.itemList.length){
                    return
                }else {
                    this.leftList=[]
                    this.rightList=[]
                    this.itemList.forEach((item,index)=>{
                        if(index%2==0){
                            this.leftList.push(item)
                        }else {
                            this.rightList.push(item)
                        }
                    })
                    this.count = this.itemList.length
                }


                // console.log(1111)
                // console.log(this.leftList)
                // console.log(this.rightList)
            }
        }
    }
</script>

<style scoped lang="stylus">


    .top-list
        padding 15px 9px 9px
        .top-h
            display flex
            align-items center
            justify-content space-between

            .img
                flex 0 0 2px
                width: 2px;
                height: 15px;

            .top-title
                flex 0 0 80px
                font-size: 14px;
                font-weight: 400;
                color: rgba(240, 200, 8, 1);
                margin-left 4.5px

            .inps
                flex 1
                display flex
                align-items center
                padding 6px 10px
                background-color white
                border-bottom-left-radius 14px
                border-top-left-radius 14px
                border-bottom-right-radius 14px
                border-top-right-radius 14px

                .iconsearch
                    width: 16px;
                    height: 16px;
                    color #F0C808

                input
                    padding 0 8px
                    width 100%
                    outline none
                    font-size 11px
                    height 14px
                    color $font-color-deep
                    font-weight 300

                    &::-webkit-input-placeholder
                        font-size 11px
                        color $font-color-light
                        font-weight 300

            .right
                flex 0 0 20px
                display flex
                justify-content flex-end

                .iconarrow_right
                    font-size 11px
                    color $font-color-light
        .test
            margin-top 9px
            display flex
            flex-flow row
            overflow:hidden

            .stable
                width 48.5%
                margin-right 3%
                overflow:hidden
            .change
                flex 1
                overflow hidden
            .item
                overflow hidden
                /*flex 0 0 165px*/
                /*margin-left 1%*/
                /*margin-right 1%*/
                margin-bottom 10px
                border-radius 10px
                padding 5px 5px
                background-color white
                height 310px
                .img
                    display block
                    width 100%
                    height 175px
                    border-radius 5px
                    margin-bottom 10px
                .name
                    flex 1
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    line-height 18px
                    /*margin-left 5px*/
                    font-size 14px
                    color #333333
                .info
                    height 20px
                    margin-top 11px
                    font-size 20px
                    width 100%
                    display flex
                    color #E33960
                    .share
                        width 45%
                        p
                            border 1px solid #E33960
                            border-radius 8px
                            white-space nowrap
                            transform scale(0.5)
                            display inline-block
                            transform-origin 0 0
                            padding 4px 4px
                    .sec
                        p
                            border 1px solid #f59e11
                            color #f59e11
                .center
                    /*width 100%*/
                    display flex
                    justify-content space-between
                    flex 1
                    .left
                        color #00d6c0
                        width 120px
                        .up
                            line-height 0.5
                            white-space nowrap
                            .rmb
                                font-size 11px
                            .intPrice
                                font-family DIN
                                font-size 18px
                            .doublePrice
                                font-family DIN
                                font-size 11px
                            .sellNum
                                margin-left 2px
                                font-size 8px
                                color #999999
                                white-space nowrap
                        .down
                            /*display flex*/
                            margin-top 8px
                            width 100%
                            height 20px
                            .share
                                width 45%
                                p
                                    color #81B72F
                                    font-size 20px
                                    border 1px solid #81B72F
                                    border-radius 8px
                                    white-space nowrap
                                    transform scale(0.5)
                                    display inline-block
                                    transform-origin 0 0
                                    padding 4px 4px
                    .right
                        margin-right 10px
                        /*margin-top 10px*/
                        display flex
                        flex-direction column
                        justify-content center
                        align-items center
                        img
                            width 25px
                            height 25px
                            margin-bottom 5px
                        div
                            color #00d6c0
                            font-size 8px
                            white-space nowrap
                .shop
                    /*display inline-block*/
                    margin-top 8px
                    display flex
                    font-size 12px
                    line-height 16px
                    .name

                        overflow hidden
                        word-break: break-all;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    span


                        font-size 12px
                        /*transform scale(0.5)
                        transform-origin 0 0*/
                        display inline-block
                        /*overflow hidden*/
                        /*text-overflow ellipsis*/



        /*.items
            margin-top 9px
            !*display flex*!
            !*flex-flow row*!
            flex-wrap wrap
            justify-content space-between
            display: -webkit-flex
            display: -moz-flex
            display: -ms-flex
            display: -o-flex
            display: flex
            -webkit-flex-direction row
            -moz-flex-direction row
            -ms-flex-direction row
            flex-direction row
            -webkit-flex-flow row wrap
            -moz-flex-flow row wrap
            -ms-flex-flow row wrap
            flex-flow row wrap

            .item
                overflow hidden
                !*flex 0 0 165px*!
                width 46%
                !*margin-left 1%*!
                !*margin-right 1%*!
                margin-bottom 10px
                border-radius 2.5px
                padding 5px 5px
                background-color white
                .img
                    display block
                    width 100%
                    height 160px
                    border-radius 5px
                    margin-bottom 10px
                .name
                    flex 1
                    white-space nowrap
                    overflow hidden

                    text-overflow ellipsis

                    margin-left 5px
                    font-size:16px;
                    color $font-color-deep
                .info
                    font-size 10px
                    font-weight 300
                    color $font-color-light
                    margin 5px 0 9px
                    margin-left 5px
                .prices
                    display flex
                    align-items center
                    margin-left 5px
                    font-size 0
                    .nowPrice
                        font-size 18px
                        color #F1652E
                        line-height 18px
                    .oldPrice
                        color $font-color-light
                        font-size 10px
                        text-decoration-line line-through
                        margin-left 5px
                        line-height 10px*/




</style>
